<style>
.register-container {
    background: #f5f7fa;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.register-card {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 480px;
    transition: transform 0.3s;
}

.register-title {
    color: #1f2d3d;
    font-size: 24px;
    margin-bottom: 32px;
    text-align: center;
    font-weight: 600;
}

.ant-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-group {
    position: relative;
}

.ant-label {
    display: block;
    margin-bottom: 8px;
    color: #5e6c84;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e4e7ed;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s;
}

.form-group input:focus {
    border-color: #ff6a00;
    box-shadow: 0 0 0 2px rgba(255,106,0,0.2);
    outline: none;
}

.ant-btn-primary {
    background: #ff6a00;
    border: none;
    color: white;
    padding: 14px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.ant-btn-primary:hover {
    background: #ff5500;
    transform: translateY(-1px);
}

.hover-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.1);
    opacity: 0;
    transition: opacity 0.3s;
}

.ant-btn-primary:hover .hover-effect {
    opacity: 1;
}

.form-footer {
    text-align: center;
    color: #7a8aa0;
    margin-top: 16px;
}

.ant-link {
    color: #ff6a00;
    text-decoration: none;
    font-weight: 500;
}

.ant-link:hover {
    text-decoration: underline;
}

.ant-form-explain {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px;
    min-height: 20px;
}

@media (max-width: 480px) {
    .register-card {
        padding: 24px;
    }
}
</style>
<div class="register-container">
    <div class="register-card">
        <h1 class="register-title">加入我们</h1>
        <form method="post" class="ant-form">
            {% csrf_token %}

            <!-- 遍历表单字段 -->
            {% for field in form %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}" class="ant-label">{{ field.label }}</label>
                    {{ field }}
                    <div class="ant-form-explain">{{ field.errors }}</div>
                </div>
            {% endfor %}

            <button type="submit" class="ant-btn ant-btn-primary ant-btn-block">
                <span class="btn-text">立即注册</span>
                <div class="hover-effect"></div>
            </button>

            <div class="form-footer">
                已有账号？<a href="{% url 'login' %}" class="ant-link">立即登录</a>
            </div>
        </form>
    </div>
</div>